<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <link rel="stylesheet" href="lib/reset.css">
    <style>
        #main {
            position: relative;
            min-width: 1080px;
        }

        .block {
            text-align: center;
            display: inline-block;
            *display: inline;
            *zoom: 1;
            position: relative;
            height: 400px;
            margin: 20px;
        }

        .block .ec {
            float: left;
            width: 600px;
            height: 100%;
            border: 3px solid #777;
        }

        .block label {
            margin-left: 500px;
            display: block;
            width: 400px;
            height: 100%;
            background: #777;
            color: #fff;
            font-size: 12px;
            line-height: 18px;
            border: 3px solid #777;
            text-align: left;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="main"></div>
<script>


    require([
        'echarts'
        // 'zrender/core/util',
        // 'echarts/chart/scatter',
        // 'echarts/component/grid',
        // 'echarts/component/visualMap'
    ], function (echarts) {
        var zrUtil = echarts.util;
        makeChart({
            show: true,
            splitNumber: 7,
            minOpen: true,
            maxOpen: true,
            backgroundColor: '#eee',
            padding: [10, 30, 5, 40],
            visualSelected: {
                data: ['red', 'pink']
            }
        });
        makeChart({
            show: true,
            splitNumber: 7,
            minOpen: true,
            maxOpen: true,
            showLabel: true,
            text: ['Number Result'],
            backgroundColor: '#eee',
            padding: [10, 30, 5, 40],
            visualSelected: {
                data: ['red', 'pink']
            }
        });
        makeChart({
            show: true,
            pieces: [
                {min: 10, max: 15, color: 'green'},
                {min: 15, max: 25, visualValue: 'blue'},
                {min: 25, max: 35},
                {min: 35, max: 55},
                {min: 55}
            ],
            left: 200,
            backgroundColor: '#eee',
            visualSelected: {
                data: ['red', 'pink']
            }
        });
        makeChart({
            splitNumber: 5,
            right: 0,
            dimension: 3,
            backgroundColor: '#eee',
            visualSelected: {
                type: 'symbol',
                data: ['roundRect', 'rect', 'diamond', 'line', 'circle']
            }
        });
        makeChart({
            splitNumber: 5,
            right: 0,
            dimension: 3,
            text: ['Number Result'],
            showLabel: true,
            backgroundColor: '#eee',
            visualSelected: {
                type: 'symbol',
                data: ['roundRect', 'rect', 'diamond', 'line', 'circle']
            }
        });
        makeChart({
            splitNumber: 6,
            top: 0,
            left: 0,
            orient: 'horizontal',
            dimension: 3,
            backgroundColor: '#eee',
            visualSelected: {
                type: 'colorSaturation'
            }
        });
        makeChart({
            splitNumber: 5,
            top: 20,
            right: 0,
            orient: 'horizontal',
            dimension: 3,
            backgroundColor: '#eee',
            visualSelected: {
                type: 'colorLightness'
            }
        });
        makeChart({
            splitNumber: 5,
            top: 20,
            right: 0,
            text: ['Number \nRe', 'Number \nRe2'],
            showLabel: true,
            orient: 'horizontal',
            dimension: 3,
            backgroundColor: '#eee',
            visualSelected: {
                type: 'colorLightness'
            }
        });
        makeChart({
            splitNumber: 6,
            top: 40,
            orient: 'horizontal',
            align: 'right',
            dimension: 3,
            backgroundColor: '#eee',
            visualSelected: {
                type: 'colorAlpha'
            }
        });

        // -------------------------------------------

        makeChart({
            show: true,
            splitNumber: 7,
            text: ['高1', '低'],
            inverse: true,
            backgroundColor: '#eee',
            padding: [10, 30, 5, 40],
            visualSelected: {
                data: ['red', 'pink']
            }
        });
        makeChart({
            show: true,
            pieces: [
                {min: 10, max: 15, color: 'green'},
                {min: 15, max: 25, visualValue: 'blue'},
                {min: 25, max: 35},
                {min: 35, max: 55},
                {min: 55}
            ],
            left: 200,
            text: ['高', '低'],
            backgroundColor: '#eee',
            visualSelected: {
                data: ['red', 'pink']
            }
        });
        makeChart({
            splitNumber: 5,
            right: 0,
            dimension: 3,
            text: ['高', '低'],
            backgroundColor: '#eee',
            visualSelected: {
                type: 'symbol',
                data: ['roundRect', 'rect', 'diamond', 'line', 'circle']
            }
        });
        makeChart({
            splitNumber: 6,
            top: 0,
            left: 0,
            orient: 'horizontal',
            dimension: 3,
            text: ['高', '低'],
            backgroundColor: '#eee',
            visualSelected: {
                type: 'colorSaturation'
            }
        });
        makeChart({
            splitNumber: 5,
            top: 20,
            right: 0,
            orient: 'horizontal',
            dimension: 3,
            text: ['高', '低'],
            backgroundColor: '#eee',
            visualSelected: {
                type: 'colorLightness'
            }
        });
        makeChart({
            splitNumber: 6,
            top: 40,
            orient: 'horizontal',
            dimension: 3,
            text: ['高', '低'],
            backgroundColor: '#eee',
            visualSelected: {
                type: 'colorAlpha'
            }
        });

        // -------------------------------------------


        makeChart({
            show: true,
            splitNumber: 0,
            backgroundColor: '#eee',
            padding: [10, 30, 5, 40],
            calculable: true,
            inRange: {
                color: ['red', 'pink']
            }
        });
        makeChart({
            left: 200,
            show: true,
            pieces: [
                {min: 10, max: 15, color: 'green'},
                {min: 15, max: 25, visualValue: 'blue'},
                {min: 25, max: 35},
                {min: 35, max: 55},
                {min: 55}
            ],
            inverse: true,
            calculable: true,
            backgroundColor: '#eee',
            inRange: {
                color: ['red', 'pink']
            }
        });
        makeChart({
            right: 0,
            splitNumber: 5,
            calculable: true,
            dimension: 3,
            backgroundColor: '#eee',
            inRange: {
                color: ['red', 'pink']
            }
        });
        makeChart({
            left: 0,
            top: 0,
            orient: 'horizontal',
            splitNumber: 6,
            calculable: true,
            inverse: true,
            dimension: 3,
            backgroundColor: '#eee',
            inRange: 'colorSaturation'
        });
        makeChart({
            right: 0,
            top: 20,
            orient: 'horizontal',
            splitNumber: 5,
            calculable: true,
            dimension: 3,
            backgroundColor: '#eee',
            inRange: 'colorLightness'
        });
        makeChart({
            top: 40,
            splitNumber: 6,
            orient: 'horizontal',
            calculable: true,
            dimension: 3,
            backgroundColor: '#eee',
            inRange: 'colorAlpha'
        });
        makeChart({
            left: 'center',
            top: 'bottom',
            orient: 'horizontal',
            splitNumber: 6,
            calculable: true,
            dimension: 3,
            backgroundColor: '#eee',
            inRange: 'colorAlpha'
        });


        // -------------------------------------------


        makeChart({
            show: true,
            splitNumber: 7,
            text: ['高2', '低'],
            backgroundColor: '#eee',
            inverse: true,
            padding: [10, 30, 5, 40],
            calculable: true,
            inRange: {
                color: ['red', 'pink']
            }
        });
        makeChart({
            left: 200,
            show: true,
            pieces: [
                {min: 10, max: 15, color: 'green'},
                {min: 15, max: 25, visualValue: 'blue'},
                {min: 25, max: 35},
                {min: 35, max: 55},
                {min: 55}
            ],
            inverse: true,
            text: ['高', '低'],
            calculable: true,
            backgroundColor: '#eee',
            inRange: {
                color: ['red', 'pink']
            }
        });
        makeChart({
            right: 0,
            splitNumber: 5,
            text: ['高', '低'],
            calculable: true,
            dimension: 3,
            backgroundColor: '#eee',
            inRange: {
                color: ['red', 'pink']
            }
        });
        makeChart({
            left: 0,
            top: 0,
            orient: 'horizontal',
            text: ['高', '低'],
            splitNumber: 6,
            calculable: true,
            inverse: true,
            dimension: 3,
            backgroundColor: '#eee',
            inRange: 'colorSaturation'
        });
        makeChart({
            right: 0,
            top: 20,
            orient: 'horizontal',
            text: ['高', '低'],
            splitNumber: 5,
            align: 'bottom',
            calculable: true,
            dimension: 3,
            backgroundColor: '#eee',
            inRange: 'colorLightness'
        });
        makeChart({
            top: 40,
            splitNumber: 6,
            orient: 'horizontal',
            text: ['高', '低'],
            calculable: true,
            dimension: 3,
            backgroundColor: '#eee',
            inRange: 'colorAlpha'
        });
        makeChart({
            left: 'center',
            bottom: 0,
            orient: 'horizontal',
            splitNumber: 6,
            text: ['高', '低'],
            calculable: true,
            dimension: 3,
            backgroundColor: '#eee',
            inRange: 'colorAlpha'
        });


        function makeChart(opt) {
            var label = JSON.stringify(opt, null, 4);
            opt = {visualMap: opt || {}};
            var containerEl = document.getElementById('main');
            var el = document.createElement('div');
            el.className = 'block';
            el.innerHTML = '<div class="ec"></div><label><pre>' + encodeHTML(label) + '</pre></label>';
            containerEl.appendChild(el);

            var chart = echarts.init(el.firstChild, null, {});
            chart.setOption(zrUtil.merge(opt, getOption()));
        }

        function encodeHTML(source) {
            return source == null
                ? ''
                : String(source)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#39;');
        };

        function getOption() {
            return {
                grid: {top: 'center', left: 'center', width: 50, height: 50},
                xAxis: {type: 'value', splitLine: {show: false}},
                yAxis: {type: 'value', splitLine: {show: false}},
                series: [
                    {
                        name: 'scatter',
                        type: 'scatter',
                        itemStyle: {
                            normal: {
                                opacity: 0.8,
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        symbolSize: 20,
                        data: [[50, 50, 50, 50, 50]]
                    }
                ]
            };
        }


    });


</script>
</body>
</html>
